<template>
    <div>
        <div style="background: #f2f2f2;list-style-type:none">
            <li style="padding-left: 20px" class="action-cell-org">
                <!--<div @click="getLeveData(data.Id)" class="organize-father-cell">-->
                <div @click="toggle" class="organize-father-cell">
                    <div class="item-left">
                        <Icon class="icon-action" :type="[open ? 'minus':'plus']" color="#aaaaaa"></Icon>
                        <p class="organize-title file-text">
                            {{ data.Title }}
                        </p>
                    </div>
                    <div class="">
                        <template v-if="data.Id">
                            <i-button @click.stop="jumpPage(data.Id,'OrganizeAdd')" size="large" type="info">添加</i-button>
                            <!--<i-button @click.stop="addNextIsShow =true" size="large" type="info">添加</i-button>-->
                            <i-button @click.stop="jumpPage(data.Id,'OrganizeDetail')" size="large" type="warning">详情
                            </i-button>
                            <i-button @click.stop="deleteEvent(data.Id,data.SubOrgs)" size="large" type="error">删除
                            </i-button>
                            <i-button @click.stop="jumpPage(data.Id,'CheckerList')" size="large" type="success">审核人
                            </i-button>
                            <i-button @click.stop="jumpPage(data.Id,'configTspc')" size="large" type="warning">满编情况
                            </i-button>
                            <!--<Icon class="icon-action" @click.stop="jumpPage(data.Id,'OrganizeAdd')" type="ios-plus"-->
                            <!--color="#87b87f"></Icon>-->
                            <!--<Icon class="icon-action" @click.stop="jumpPage(data.Id,'OrganizeDetail')" type="ios-color-wand"-->
                            <!--color="#ffb752"></Icon>-->
                            <!--<Icon class="icon-action" @click.stop="jumpPage(data.Id,'OrganizeEdit')" type="edit"-->
                            <!--color="#6fb3e0"></Icon>-->
                            <!--<Icon class="icon-action" @click.stop="deleteEvent(data.Id,data.SubOrgs)" type="trash-b"-->
                            <!--color="#d15b47"></Icon>-->
                            <!--<Icon class="icon-action" @click.stop="jumpPage(data.Id,'CheckerList')" type="ios-person"-->
                            <!--color="rgb(7, 36, 50)"></Icon>-->
                        </template>
                        <template v-else>
                            <!--<Icon class="icon-action" @click.stop="jumpPage(data.Id,'OrganizeAdd')" type="ios-plus"-->
                            <!--color="#87b87f"></Icon>-->
                            <i-button @click.stop="jumpPage(data.Id,'OrganizeAdd')" size="large" type="info">添加</i-button>
                        </template>
                    </div>
                </div>
                <ul style="padding-left: 20px;list-style-type:none;margin-bottom: 0" v-show="open" v-if="hasChild">
                    <tree-item v-for="(item, indexSub) in data.SubOrgs" :data="item" :key="indexSub"></tree-item>
                </ul>
            </li>
        </div>
        <!--<Progress :percent="55" :stroke-width="15"></Progress>-->
    </div>
</template>

<script>
    import apiUtil from '../assets/utils/api_util';
    import baseUtil from '../assets/utils/base-util';
    import orgAdd from '../pages/organize/add';
    import store from '../store/index';

    export default {
        name: 'TreeItem',
        props: {
            data: {}
        },
        mounted() {
        },
        components: {
            orgAdd
        },
        data() {
            return {
                open: true,
            }
        },
        store,
        computed: {
            hasChild() {
                return this.data.SubOrgs && this.data.SubOrgs.length
            }
        },
        methods: {
            getData: function (val) {
                let arr = baseUtil.getSessionStorage('organize');

                this.data = JSON.parse(val);

            },
            toggle() {
                if (this.hasChild) {
                    this.open = !this.open
                }
            },
            getLeveData: function (id) {
                let that = this;
                if (that.hasChild) {
                    that.open = !that.open
                }

                let para = {
                    uplevelid: id
                };

                this.$Loading.start();
                apiUtil.get(that, apiUtil.urls.OrganizeList, para, function (res) {
                    let arr = baseUtil.getSessionStorage('organize');
                    let levelArr = JSON.parse(arr);
                    let addArr = res.Msg;
                    let updata = that.recursiveData(levelArr, id, addArr);

                    baseUtil.setSessionStorage('organize', JSON.stringify(updata));
                    that.$store.dispatch('addTreeData', updata);
                });
            },
            recursiveData: function (item, id, addArr) {
                let value = null;
                let ret = recurision(item, id, addArr);
                return ret;

                function recurision(item, id, addArr) {
                    if (!item) return null;
                    for (var i = 0; i < item.length; i++) {
                        if (item[i].id == id) {
                            if (item[i].item && item[i].length > 0) {
                                item[i].item.push(addArr);
                            } else {
                                item[i].item = [];
                                item[i].item = addArr;
                            }
                            break;
                        }

                        if (item[i].item) {
                            recurision(item[i].item, id, addArr)
                        }
                    }
                    return item;
                }
            },

            jumpPage: function (id, url) {
                //跳转
                console.log('上级id:', id);
                let route = '';
                if (id.length > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                    console.log('跳')
                }

                this.$router.push(route);
            },
            deleteEvent: function (id, index) {

                let that = this;
                if (index.length > 0) {
                    // this.$message.success('不能删除有下级组织结构的组织 ');

                    this.$Notice.warning({
                        top: 50,
                        duration: 3,
                        title:'不能删除有下级组织结构的组织'
                    })
                } else {

                    this.$Modal.confirm({
                        title: '提示',
                        content: `是否删除该组织吗`,
                        onOk: function () {
                            this.$Loading.start();
                            let para = {id: id};
                            let params = that.$qs.stringify(para);
                            apiUtil.post(that, apiUtil.urls.OrganizeDelete, params, function (res) {
                                that.$message.success('删除成功 ');
                            });
                        }
                    })
                }

            },
        }
    }
</script>

<style>
    .tree-menu li {
        line-height: 1.5;
    }

    .icon-action > p {
        cursor: pointer;
        font-size: 14px;
        line-height: 20px;
    }

    .icon-action > p:visited {
        background: #fff;
    }

    em.icon {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-right: 5px;
        background-repeat: no-repeat;
        vertical-align: middle;
    }

    .tree-menu .icon-action {
        line-height: 1.5;
    }

    .icon-action {
        margin-right: 15px;
        font-size: 18px;
    }

    .organize-father-cell {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #f2f2f2;
        padding: 10px;
    }

    .organize-father-cell .item-left {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

</style>
